import VuiElement from '../../base/element';
import { containsClassName } from '../../dom';
import { addOutClickListener } from '../../event';
import VuiSvgIcon from '../icon/svg-icon';
import VuiSeparatorHorizontal from '../separator/separator-horizontal';
import VuiDropdownItem from './item';
import VuiDropdownItemContainer from './item/item-container';
import VuiDropdownToggleItem from './item/toggle-item';
import VuiDropdownPanel from './panel';
import './style.css';

/**
 * 下拉框
 */
export default class VuiDropdown extends VuiElement {
  /**
   * 下拉菜单
   * @param {*} width
   * @param {*} closeOnClick
   * @param {*} parent
   * @param {*} isDown true:下方，false:右侧
   */
  constructor(closeOnClick = false, width = null, elt = null, isDown = true) {
    super();
    this.classname = 'vui-dropdown';
    this.visible = false;
    this.closeOnClick = closeOnClick;
    this._config = {
      width,
      closeOnClick,
      elt,
      isDown
    };
  }

  initUI() {
    const config = this._config;
    this.container = this.createDiv(this.classname);
    if (config.closeOnClick) {
      this.setClickListener(evt => {
        this.hide();
      });
    }
    if (config.elt) {
      if (config.isDown) {
        const top = config.top || config.elt.getHeight() || 26;
        this.setTopLeft(top, 0);
      } else {
        const left = config.left || config.elt.getWidth() || 26;
        this.setTopLeft(0, left);
      }
    }
    if (config.width) {
      this.setWidth(config.width);
    }
  }

  alignRight() {
    this.setProperty('right', '0px');
    this.removeProperty('left');
  }

  /**
   * 创建新实例 并执行initUI函数
   */
  static newInstance(closeOnClick = false, width = null, elt = null, isDown) {
    const instance = new VuiDropdown(closeOnClick, width, elt, isDown);
    instance.initUI();
    return instance;
  }

  setOnShow(func) {
    this._onshow = func;
  }

  setOnHide(func) {
    this._onhide = func;
  }

  show() {
    this.safeRun(this._onshow);
    super.show();
    this.removeOutClickListener = addOutClickListener(this.container, _ => {
      this.hide();
    });
  }

  hide() {
    this.safeRun(this._onhide);
    super.hide();
    if (typeof this.removeOutClickListener === 'function') {
      this.removeOutClickListener();
    }
  }

  addDropdownItem(id, title, iconName, hasChild, action, disabled = false) {
    const icon = iconName ? VuiSvgIcon.newInstance(iconName) : null;
    const item = VuiDropdownItem.newInstance(id, title, icon, hasChild, disabled);
    if (typeof action === 'function') {
      item.setClickListener(action);
    }
    this.append(item);
  }

  addDropdownItemContainer(id, title, dom, action) {
    const item = VuiDropdownItemContainer.newInstance(id, title, dom);
    if (typeof action === 'function') {
      item.setClickListener(action);
    }
    this.append(item);
  }

  addToggleItem(id, title, checked, action) {
    const item = VuiDropdownToggleItem.newInstance(id, title, checked);
    item.setClickListener(action);
    this.append(item);
  }

  addDropdownPanel(title, item) {
    const panel = VuiDropdownPanel.newInstance(title);
    panel.addItems(item);
    this.append(panel);
  }

  /**
   * 添加options
   */
  addOptions(options) {
    options.forEach(element => {
      if (typeof element === 'string') {
        if (element === VuiDropdown.separator) {
          this.addSeparator();
        } else {
          const menu = VuiDropdownItem.newInstance(element, element);
          this.append(menu);
        }
      } else {
        if (element.value === VuiDropdown.separator) {
          this.addSeparator();
        } else if (element.dom) {
          this.addDropdownItemContainer(element.value, element.text, element.dom, element.action);
        } else {
          this.addDropdownItem(element.value, element.text, element.icon, false, element.action);
        }
      }
    });
  }

  /**
   * 设置options
   * options = [
   *  { text: 'text', value: 'value', icon: 'icon', action:_ => {} },
   * ]
   *
   * @param {*} options
   * @param {*} action
   */
  setOptions(options, action) {
    this.addOptions(options);
    this.setAction(action);
  }

  setAction(action) {
    this.setClickListener(evt => {
      const elt = evt.target;
      if (containsClassName(elt, 'vui-dropdown-item-container') && typeof action === 'function') {
        const value = elt.getAttribute('value');
        const text = elt.getAttribute('text');
        action(value, text);
      }
      this.hide();
    });
  }

  /**
   * 更换options
   * @param {*} options
   */
  changeOptions(options) {
    this.clean();
    this.addOptions(options);
  }

  addSeparator() {
    const sep = VuiSeparatorHorizontal.newInstance();
    this.append(sep);
  }

  static separator = 'vui-dropdown-separator';
}
